<template>
	<div>
		<!--头部-->
		<!--头部-->
		<header>
			<div class="header_body">

				<div class="po_img">
					<a href="#"><img src="../static/images/logo_03.jpg" class="logo" style="width: 204px;height: 152px;border-radius: 15px;"></a>
				</div>

				<div class="header_enter">
					<ul v-if='loginState'>
						<li @click="tuichu">
							<a href="javascrip:void(0)">
								退出登录
							</a>
						</li>
					</ul>
					<ul v-else>
						<li>
							<router-link to="login">
								登录&nbsp;&nbsp;|&nbsp;&nbsp;
							</router-link>
						</li>
						<li>
							<router-link to="register">
								注册
							</router-link>
						</li>
					</ul>

				</div>

				<div class="header_p">
					<p>你好欢迎您来到顺芝堂网站！</p>
				</div>
				<!--右侧菜单-->
				<div class="nav">
					<ul>
						<li class="nava">
							<router-link to="/">首页</router-link>
						</li>
						<li class="nava">
							<router-link to="shopCar">
								购物车
							</router-link>
						</li>
						<li class="nava">
							<router-link to="order">
								商品订单
							</router-link>
						</li>
						<li class="nava">
							<router-link to="about">
								关于我们
							</router-link>
						</li>
						<li class="clo">
							<a href="javascript:;"><img src="../static/images/o_03.png">个人中心</a>
							<ul class="drop-down-content" id="luing">
								<router-link to="myAccount">
									<li>
										<a href="javascript:void(0)">
											我的账户
										</a>
									</li>
								</router-link>
								<router-link to="partner">
									<li>
										<a href="javascript:void(0)">
											合作伙伴
										</a>
									</li>
								</router-link>
								<router-link to="info">
									<li>
										<a href="javascript:void(0)">
											信息管理
										</a>
									</li>
								</router-link>
							</ul>
						</li>
					</ul>
				</div>

			</div>
			<div class="zero"></div>
		</header>
		<!--头部下方背景图片-->
		<div class="back_Img">

			<!--<swiper :options="swiperOption" ref="mySwiper">
				<swiper-slide v-for="item in bannerList" :key="item.path">
					<img :src="src + item.path" style="height: 750px;">
				</swiper-slide>
				<div class="swiper-pagination" slot="pagination"></div>
			</swiper>-->
			<el-carousel height="750px">
				<el-carousel-item v-for="item in bannerList" :key="item.path">
					<img :src="src + item.path" style="height: 750px;">
				</el-carousel-item>
			</el-carousel>
		</div>

		<!--产品介绍背景图片-->
		<div class="introduce" v-html="goodDatail.goodsDetail">

		</div>
		<!--产品购买-->
		<div class="shopping">
			<div class="shopping_img">
				<img :src="src + goodDatail.pic" style="width: 582px;height: 452px;" />
			</div>
			<div class="shopping_buy">
				<p class="tagline">{{goodDatail.goodsName}}</p>

				<div class="price" style="background: #E4E4E4; padding-left: 10px;">
					<p class="selling">售　价<span> ￥{{goodDatail.origin}}</span></p>
					<p class="selling">会员价<span> ￥{{goodDatail.price}}</span></p>
					<p class="selling">服　务<span> 由<span>顺芝堂</span>负责发货，并提供售后服务</span>
					</p>
				</div>
				<div class="purchase">
					<button @click="purchase">立即购买</button>
				</div>
				<div class="trolley">
					<button @click='addShopcar'>
                  <img src="../static/images/index_14.png">
                  加入购物车
              </button>
				</div>
			</div>
			<div class="zero"></div>
		</div>

		<!--脚部-->
		<v-footer>
		</v-footer>
	</div>
</template>

<script>
	export default {
		created() {
			var self = this
			this.$api.get('/front/base/isLogin', null, r => {
				console.log('登录接口r', r)
				if(r.code === 200) {
					self.loginState = true
				} else {
					self.loginState = false
				}
			})
			this.$api.get('/front/base/banners', null, r => {
				console.log('轮播图r', r)
				this.bannerList = r.data.list
			})
			this.$api.get('/front/base/goodsDetail', null, r => {
				console.log('商品详情', r)
				this.goodDatail = r.data.list[0]
				this.goodsId = r.data.list[0].goodsId
				self.$api.get('/front/base/rates', {
					gid: self.goodsId
				}, re => {
					console.log('商品评价信息', re)
					self.evaluateNum = re.data.dataCount
				})
			})
		},
		data() {
			return {
				loginState: false,
				src: this.$src,
				goodDatail: {},
				goodsId: 0,
				evaluateNum: 0,
				bannerList: [],
				swiperOption: {
					initialSlide: 0,
					pagination: {
						el: '.swiper-pagination',
					},
					loop: true,
					speed: 400,
					autoplay: {
						delay: 4500,
						disableOnInteraction: false,
					},
					observer: true, //修改swiper自己或子元素时，自动初始化swiper
					observeParents: true //修改swiper的父元素时，自动初始化swiper
				}
			}
		},
		methods: {
			addShopcar: function() {
				var self = this
				this.$api.post('/front/carts', {
					goodsId: this.goodsId
				}, r => {
					console.log('r', r)
					if(r.code === 200) {
						self.$message({
							type: "success",
							message: r.data
						})
					} else {
						self.$message(r.error);
						return false
					}
				})
			},
			purchase: function() {
				var self = this
				this.$api.post('/front/carts', {
					goodsId: this.goodsId
				}, r => {
					if(r.code === 200) {
						self.$message({
							type: "success",
							message: r.data
						})
					}
					self.$router.replace({
						path: 'shopCar'
					})
				})
			},
			tuichu: function() {
				var self = this
				this.$api.get('/front/base/logout', null, r => {
					console.log('退出r', r)
					if(r.code === 200) {
						self.$router.replace({
							path: '/login'
						})
						self.$message({
							type: 'success',
							message: r.data
						})
					} else {
						self.$message({
							type: 'success',
							message: r.error
						})
					}

				})
			}
		}
	}
</script>

<style scoped>

</style>